<template>
  <component
    :is="menuComponent"
    v-if="!item.hidden"
    :item="item"
    :route-children="routeChildren"
  >
    <template v-if="item.children && item.children.length">
      <sp-menu
        v-for="route in item.children"
        :key="route.path"
        :item="route"
      ></sp-menu>
    </template>
  </component>
</template>
<script lang="ts">
import SpMenuItem from "/@/components/sp-menu/sp-menu-item/index.vue";
import SpSubMenu from "/@/components/sp-menu/sp-submenu/index.vue";
import { mapGetters } from "vuex";
export default {
  name: 'SpMenu',
  props: {
    item: {
      type: Object,
      default: () => null,
    },
  },
  data() {
      return {
          menuComponent: '',
          routeChildren: {}
      }
  }, 
  computed: {
    ...mapGetters({
      collapsed: "setting/collapsed",
    }),
  },
  setup(props) {
    
  },
  methods: {
    handleChildren (children = []) {
      if (children === null) return [];
      return children.filter((item) => item.hidden !== true);
    }
  }, 
  created() {
      const showMenu = this.handleChildren(this.item.children);
      console.log("item: ", this.item)
      if (showMenu.length === 0) {
        this.menuComponent = "SpMenuItem";
        this.routeChildren = this.item;
      } else if (showMenu.length === 1 && this.item.alwaysShow !== true) {
        this.menuComponent = "SpMenuItem";
        this.routeChildren = showMenu[0];
      } else {
        this.menuComponent = "SpSubMenu";
      }
  },
  components: {
    SpMenuItem,
    SpSubMenu,
  },
}
</script>
<style scoped>
 .anticon {
    margin-right: 3px !important;
  }
</style>

